<%-- 
    Document   : dataTable
    Created on : 2017-9-15, 15:53:26
    Author     : Administrator
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="UTF-8"?><!--这句话不知道会不会有影响-->

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:v="urn:schemas-microsoft-com:vml"><!--    添加html的两个属性-->
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>数据查询</title>
            <link rel="stylesheet" type="text/css" href="extjs/build/classic/theme-crisp/resources/theme-crisp-all.css"/>
            <link rel="stylesheet" type="text/css" href="extjs/build/classic/theme-crisp/resources/theme-crisp-all-debug.css"/>
            <!--<link rel="stylesheet" type="text/css" href="jquery/bootstrap.min.css">-->

            <script type="text/javascript" charset="UTF-8" src="extjs/build/ext-bootstrap.js"></script>
            <script type="text/javascript" charset="UTF-8" src="extjs/build/ext-all_new.js"></script>
            <script type="text/javascript" charset="UTF-8" src="extjs/build/ext-all-debug.js"></script>
            <script type="text/javascript" charset="UTF-8" src="extjs/build/classic/locale/locale-zh_CN.js"></script>
            <script type="text/javascript" charset="UTF-8" src="extjs/build/classic/locale/locale-zh_CN-debug.js"></script>
            <script type="text/javascript" charset="UTF-8" src="extjs/build/DateTimeField.js"></script>
            <script type="text/javascript" charset="UTF-8" src="extjs/build/Spinner.js"></script>
            <script type="text/javascript" charset="UTF-8" src="extjs/build/SpinnerField.js"></script>
            <script type="text/javascript" charset="UTF-8" src="extjs/build/datetimer.js"></script>

            <script type="text/javascript">
                Ext.onReady(function () {
                    var tableName = document.getElementById("tableName").innerHTML;
                    Ext.tip.QuickTipManager.init();//初始化提示
                    //                gridPanel.setHeight(Ext.getBody().getViewSize().height);
                    //                viewport.setHeight(Ext.getBody().getViewSize().height);
                    Ext.Loader.setConfig({enabled: true});
                    Ext.Loader.setPath('Ext', '../extjs/');
                    Ext.EventManager.onWindowResize(function (width, height) {
                        //                    Ext.MessageBox.alert("提示", "这是一开始");
                        viewport.setHeight(height);
                        viewport.setWidth(width);
                        gridPanel.setHeight(height);
                        gridPanel.setWidth(width);

                    });

                    var updateId = "";
                    var msgbox1 = Ext.Msg.show({
                        title: "加载数据进度",
                        msg: "",
                        closable: true,
                        width: 300,
                        modal: true,
                        progress: true
                    });
                    var count = 0;
                    var curnum = 0;
                    var msgtext = "";
                    var task = {run: function () {
                            count++;


                            if (count === 10) {
                                Ext.TaskManager.stop(task);
                            }
                            curnum = count / 10;
                            //                        Ext.Msg.alert("提示信息", "加载数据出错!错误信息："+curnum);
                            msgtext = "当前加载:" + curnum * 100 + "%";
                            msgbox1.updateProgress(curnum, msgtext, false);
                        }, interval: 300};
                    Ext.TaskManager.start(task);
                    var dataStore = Ext.create('Ext.data.Store', {
                        storeId: 'simpsonsStore',
                        // fields一定要明确指定type，这样有很多好处，比如filter能直接设为true，便会默认按照store-fields设置好的type来确定filter的类型。

                        fields: [{
                                name: '_id',
                                type: 'string'
                            }, {
                                name: 'ct',
                                type: 'string'
                            }, {
                                name: 'pt',
                                type: 'string'
                            }, {
                                name: 'it',
                                type: 'string'
                            }, {
                                name: 'ut',
                                type: 'string'
                            },
                            {
                                name: 'title',
                                type: 'string'
                            }, {
                                name: 'nrd',
                                type: 'string'
                            }, {
                                name: 'wx_nap',
                                type: 'string'
                            }, {
                                name: 'wx_nad',
                                type: 'string'
                            }
                        ],
                        //排序，按ID排序，升序排序
                        sorters: [{property: "_id", direction: "ASC"}],
                        //样例数据
                        //                    data: [
                        //                        {id: "1", bug_id: "1", content: '2', bug_time: "21", bug_time_str: '1', remark: "1", status: "1"}
                        //                    ],
                        // 数据代理服务
                        autoSync: true,
                        autoLoad: {start: 0, limit: 19,tableName:tableName},
                        proxy: {
                            type: 'ajax', // 使用ajax请求
                            url: 'getDataTableList.htm', // 请求后台读取数据的地址
                            // 读取数据的工具（数据代理）
                            reader: {
                                // 读取方式按照json字符串格式读取
                                type: 'json',
                                // json解析成js对象之后读取所有数据（通常是数组）的属性名称。
                                root: 'root',
                                // json解析成js对象之后读取数据总条数的属性名称
                                totalProperty: 'totalProperty'
                            }
                        },
                        // 每页显示多少条
                        pageSize: 10
                    });
                    dataStore.load(
                            {
                                params: {username_1: "username_1:",tableName:tableName},
                                scope: dataStore,
                            }
                    );
                    //自定义参数
                    dataStore.on('beforeload', function (store, options) {
                        Ext.apply(dataStore.proxy.extraParams, {username: "username:",tableName:tableName});
                    });
                    //加载数据的监听事件
                    dataStore.on('load', function (store, records, options) {
                        Ext.TaskManager.stop(task);
                        msgbox1.hide();
                        if (records[0].get("id") === "-1") {
                            //                        Ext.Msg.alert("提示信息", "加载数据出错!错误信息：" + records[0].get("content"));
                            dataStore.removeAll();
                        }
                    });


                    var gridPanel = Ext.create('Ext.grid.Panel', {
                        title: '群发消息数据',
                        store: Ext.data.StoreManager.lookup('simpsonsStore'),
                        columnLines: true, //加上表格线
                        forceFit: true, //宽度自适应
                        clicksToEdit: 2,
                        autoScroll: true,
                        width: Ext.getBody().getViewSize().width,
                        height: Ext.getBody().getViewSize().height,
                        selModel: {selType: 'checkboxmodel'}, //选择框
                        viewConfig: {
                            stripeRows: true, //在表格中显示斑马线
                            enableTextSelection: true //可以复制单元格文字
                        },
                        listeners: {'itemdblclick': function (view, record, item, index, e, eOpts, n) {
                            }
                        },
                        header: {
                            labelWidth: 30,
                            bodyPadding: 20,
                            items: [
                                {
                                    xtype: 'textfield',
                                    name: '_idText',
                                    id: "_idText",
                                    labelWidth: 60,
                                    padding: 10,
                                    fieldLabel: '索引_id',
                                    editable: true,
                                    allowBlank: false
                                },
                                //                            {
                                //                                xtype: 'textfield',
                                //                                name: 'starttimeText',
                                //                                id: "starttimeText",
                                //                                labelWidth: 60,
                                //                                padding: 10,
                                //                                fieldLabel: '开始时间',
                                //                                editable: true,
                                //                                allowBlank: false,
                                //                                listeners: {
                                //                                    "select": function () {
                                //                                        starttimeWindow.show();
                                //                                    }
                                //                                }
                                //                            },
                                {
                                    xtype: 'datefield',
                                    name: 'starttimeText',
                                    id: "starttimeText",
                                    format: 'Y-m-d H:m:s',
                                    labelWidth: 60,
                                    padding: 10,
                                    emptyText: '开始时间aa',
                                    editable: true,
                                    allowBlank: false,
                                },
                                //时间控件的剪切
                                //                            '<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>'

                                {
                                    labelWidth: 60,
                                    padding: 10,
                                    xtype: 'datefield',
                                    emptyText: "结束时间",
                                    id: "endtimeText",
                                    format: 'Y-m-d H:m:s',
                                    listeners: {
                                        "select": function () {
                                            Ext.MessageBox.alert('加载', "没有该日数据或者加载数据失败");
                                        }
                                    }
                                },
                                {
                                    xtype: 'numberfield',
                                    name: 'numText',
                                    id: "numText",
                                    labelWidth: 60,
                                    padding: 10,
                                    //                                width:50,
                                    fieldLabel: '条数',
                                    emptyText: "10",
                                    minValue: 10,
                                    value: '10',
                                    regex: /^[1-9]+[0-9]*]*$/,
                                    regexText: '请输入正确的数据类型',
                                    allowBlank: false, // requires a non-empty value
                                },
                                {
                                    //添加搜索框
                                    xtype: 'button',
                                    buttonAlign: 'center',
                                    text: '搜索',
                                    margin: '0 20 0 20',
                                    handler: function () {
                                        window.open("testDatePicker.htm");
                                        //                                    Ext.MessageBox.alert("提示", "设置每页数据" + Ext.getCmp('numText').getValue());
                                        var pagingToolbar = Ext.getCmp('pagingbar');
                                        pagingToolbar.pageSize = parseInt(Ext.getCmp('numText').getValue());
                                        defaultPageSize = parseInt(Ext.getCmp('numText').getValue());//更改全局变量itemsPerPage
                                        dataStore.pageSize = parseInt(Ext.getCmp('numText').getValue());//设置store的pageSize，能够将工具栏与查询的数据同步。
                                        Ext.MessageBox.alert("提示", "数据仓库的每页数设置" + dataStore.pageSize + "," + pagingToolbar.pageSize);
                                        //注意默认值的排除
                                        Ext.MessageBox.alert("提示", Ext.getCmp('_idText').getValue() + Ext.getCmp('starttimeText').getValue() + Ext.getCmp('endtimeText').getValue());
                                        dataStore.reload({
                                            params: {
                                                tableName:tableName,
                                                limit: defaultPageSize,
                                                queryid: Ext.getCmp('_idText').getValue(),
                                                starttime: Ext.getCmp('starttimeText').getValue(),
                                                endtime: Ext.getCmp('endtimeText').getValue()}});//显示第一页,不论你在第几页又一次选择显示条数，默认都显示第一页数据，rowNumber也会自己主动转换成从1開始。
                                    }
                                },
                            ]
                        },
                        columns: [
                            {text: '索引', dataIndex: '_id', hidden: true},
                            {text: '创建时间', dataIndex: 'ct', flex: 1},
                            {text: '发布时间', dataIndex: 'pt', flex: 1},
                            {text: '入库时间', dataIndex: 'it'},
                            {text: '更新时间', dataIndex: 'ut'},
                            {text: '标题', dataIndex: 'title', width: 200},
                            {text: '阅读数', dataIndex: 'nrd'},
                            {text: '省份', dataIndex: 'wx_nap'},
                            {text: '地市', dataIndex: 'wx_na的'},
                            {
                                xtype: 'actioncolumn',
                                text: '详细',
                                width: 60,
                                items: [
                                    {text: " "},
                                    //修复bug-完成
                                    {
                                        //查找图标
                                        icon: 'images/network.png',
                                        tooltip: '查看详细信息',
                                        handler: function (grid, rowIndex, colIndex, node, e, record, rowEl) {
                                            // do something...  

                                            //                                        Ext.MessageBox.confirm('提示', '确定查看该条记录详细信息？', function (button, text) {
                                            //                                            if (button === 'yes') {
                                            window.open("checkLog.htm?tableName="+tableName+"&"+"id=" + record.get("_id"));
                                            //                                            }
                                            //                                        });

                                        }
                                    },
                                ]
                            }
                        ],
                        dockedItems: [{
                                xtype: 'pagingtoolbar',
                                id: 'pagingbar',
                                store: Ext.data.StoreManager.lookup('simpsonsStore'), // same store GridPanel is using  
                                dock: 'bottom',
                                pageSize: 19,
                                //                            plugins : [ new Ext.ux.plugins.PageComboResizer() ],
                                displayInfo: true,
                                emptyMsg: "没有数据",
                                items: [
                                    {
                                        xtype: 'button',
                                        text: '批量删除',
                                        handler: function () {
                                            var records = gridPanel.getSelectionModel().getSelection();
                                            //                                        gridPanel.getStore().currentPage=200;
                                            if (records.length === 0) {
                                                Ext.Msg.alert("提示", "未选中任何项目");
                                            } else {
                                                var processArrayStr = "";
                                                var userId = "";
                                                for (var i = 0; i < records.length; i++) {
                                                    processArrayStr += records[i].get("id") + ";";
                                                }
                                                //发到后台处理
                                                Ext.Ajax.request({
                                                    url: "batchDelete.htm",
                                                    params: {tableName:tableName,idArray: processArrayStr},
                                                    headers: {
                                                        'userHeader': 'userMsg'
                                                    },
                                                    method: 'POST',
                                                    success: function (response, options) {

                                                        if (response.responseText === "success")
                                                        {
                                                            Ext.MessageBox.alert('提示', '成功删除');
                                                            dataStore.reload();//重新加载
                                                        } else {
                                                            Ext.MessageBox.alert('失败', '删除失败: ' + response.responseText);
                                                        }
                                                    },
                                                    failure: function (response, options) {
                                                        Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号：' + response.status);
                                                    }
                                                });
                                            }
                                        }
                                    },
                                ]
                            },
                        ],
                    });
                    var starttimeWindow = Ext.create('Ext.window.Window', {
                        id: "starttimeWindow",
                        closeAction: "hidden",
                        title: "配置开始时间",
                        width: 350,
                        //                    height: 200,
                        autoScroll: true,
                        bodyPadding: 20,
                        //                    bodyPadding: 10,
                        bodyStyle: 'overflow-x:hidden; overflow-y:scroll',
                        items: [
                            {
                                xtype: 'datefield',
                                name: 'starttimefild',
                                id: "starttimedild",
                                format: 'Y-m-d H:m:s',
                                labelWidth: 60,
                                padding: 10,
                                emptyText: '开始时间aa',
                                editable: true,
                                allowBlank: false,
                            },
                            {
                                xtype: 'numberfield',
                                name: 'shourfild',
                                id: "shourfild",
                                fieldLabel: '时',
                                emptyText: "0",
                                value: "0",
                                minValue: 1,
                                maxValue: 59,
                                mouseWheelEnabled: true,
                                regex: /^[1-9]+[0-9]*]*$/,
                                regexText: '请输入正确的数据类型',
                                allowBlank: false  // requires a non-empty value
                            },
                            {
                                xtype: 'numberfield',
                                name: 'sminfild',
                                id: "sminfild",
                                fieldLabel: '分',
                                emptyText: "0",
                                value: "0",
                                minValue: 1,
                                maxValue: 59,
                                mouseWheelEnabled: true,
                                regex: /^[1-9]+[0-9]*]*$/,
                                regexText: '请输入正确的数据类型',
                                allowBlank: false  // requires a non-empty value
                            },
                            {
                                xtype: 'numberfield',
                                name: 'ssecfild',
                                id: "ssecfild",
                                fieldLabel: '秒',
                                emptyText: "0",
                                value: "0",
                                minValue: 1,
                                maxValue: 59,
                                mouseWheelEnabled: true,
                                regex: /^[1-9]+[0-9]*]*$/,
                                regexText: '请输入正确的数据类型',
                                allowBlank: false  // requires a non-empty value
                            },
                        ],
                        buttonAlign: 'center',
                        buttons: [{
                                style: 'margin-bottom:20px;',
                                width: 100,
                                text: '确定',
                                handler: function () {
                                    //                                var reg = /^[1-9]+[0-9]*]*$/;
                                    //                                if (reg.test(Ext.getCmp("memory").getValue()) && reg.test(Ext.getCmp("cpu").getValue())) {
                                    //                                    //填入输入框
                                    //                                } else {
                                    //                                    Ext.Msg.alert("提示", "输入数字必须大于0");
                                    //                                }
                                    //                                Ext.Msg.alert("提示", "数字" + ";" + reg.test(Ext.getCmp("memory").getValue()) + ";" + Ext.getCmp("cpu").getValue());
                                    starttimeWindow.hide();
                                },
                                id: "comitButton"
                            }
                            ,
                            {
                                text: '取消执行',
                                width: 100,
                                style: 'margin-bottom:20px;',
                                handler: function () {
                                    starttimeWindow.hide();
                                },
                                id: "refuseButton"
                            }
                        ]
                    });
                    var viewport = Ext.create('Ext.container.Viewport', {
                        layout: 'border',
                        items: [
                            {
                                region: 'center',
                                xtype: 'panel', // TabPanel itself has no title
                                activeTab: 0, // First tab active by default
                                width: Ext.getBody().getViewSize().width,
                                height: Ext.getBody().getViewSize().height,
                                items: [
                                    gridPanel
                                ]
                            }]
                    });
                    var defaultPageSize = 10;
                    function getPageSize() {
                        return parseInt(defaultPageSize);
                    }
                    function setPageSize(pageSize) {
                        defaultPageSize = pageSize;
                    }
                });

            </script>
    </head>
    <body>
        <div id="tableName" name="tableName" style="display: none">${tableName}</div>
    </body>
</html>
